<template>
  <!-- 页面大盒子 -->
  <div class="big">

    <div class="ipc">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="背景图" />
    </div>
    <!-- 有头像的盒子 -->
    <div class="my_info">
      <!-- 头像 -->
      <div class="my_info_head">
        <img :src="this.getToken?'http://liufusong.top:8080' + user.avatar:this.avatar" alt="" />
      </div>
      <!-- 文字 和跳转 -->
      <div class="my_info_foot" >
      <div class="my_info_foottext">{{this.getToken?this.user.nickname:this.nicknam}}</div>
        <div clas="my_info_login">
          <van-button  round block type="info" @click="logout" >{{this.getToken? "退出登录":"去登录"}}</van-button>
        </div>
      </div>
    </div>
    <div class="my_info_body">
      <van-grid :column-num="3" :border="false">
        <van-grid-item icon="star-o" to="/collect" text="我的收藏" />
        <van-grid-item icon="wap-home-o" text="我的出租"  to="/rent"  />
        <van-grid-item icon="clock-o" text="看房记录" />
        <van-grid-item icon="coupon-o" text="成为房主" />
        <van-grid-item icon="user-o" text="个人资料" />
        <van-grid-item icon="photo-o" text="联系我们" />
      </van-grid>
    </div>
    <div class="my_info_last">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>
  </div>

</template>

<script>
import { GetuserFn, LogoutuserFn } from '@/api/user'
import { getToken, delToken } from '@/utils/storage'
export default {
  data () {
    return {
      user: {},
      getToken: '',
      nicknam: '游客',
      avatar: 'http://liufusong.top:8080/img/profile/avatar.png'
    }
  },

  async created () {
    // 给到usermessage请求回来的数据
    const { body } = await GetuserFn()
    console.log(body)
    this.user = { ...body }
    console.log(this.user)
    this.getToken = getToken()
  },
  // 退出后删除token
  methods: {
    async logout () {
      const res = await LogoutuserFn()
      delToken()
      console.log(res)
      if (!this.getToken) {
        this.$router.push('/logini')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.ipc img {
  width: 100%;
  box-sizing: border-box;
}
.my_info {
  position: absolute;
  width: 319px;
  height: 165px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  top: 20%;
  background-color: #fff;
  box-shadow: 0 0 10px 3px #ddd;
}
.my_info_head {
  transform: translateY(-50%);
}
.my_info_head img {
  border: 4px solid white;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
.my_info_foot {
  background-color: white;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -50px;
  bottom: 0;
}
.my_info_foottext {
  padding: 20px;
}
.van-button {
  height: 30px;
}
.my_info_body {
  margin-top: 120px;
}
.my_info_last{
  width: 345px;
  height: 84px;
  margin-left: 18px;
  margin-top: 20px;
}
.my_info_last img{
  width: 100%;
  box-sizing: border-box;
}
</style>
